<template>
  <div class="view-anchor">
    <div id="base">
      <fx-card title="基础用法">
        <fx-anchor scroll-target=".view-anchor">
          <fx-anchor-link href="#base" title="基础用法"/>
          <fx-anchor-link href="#static" title="静态位置"/>
          <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
          <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
        </fx-anchor>
        <template #hide>
          <pre v-highlight="base"><code></code></pre>
        </template>
      </fx-card>
    </div>
    <div id="static">
      <fx-card title="固定锚点">
        <fx-anchor :affix-offset="100" :affix="true" scroll-target=".view-anchor">
          <fx-anchor-link href="#base" title="基础用法"/>
          <fx-anchor-link href="#static" title="静态位置"/>
          <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
          <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
        </fx-anchor>
        <template #hide>
          <pre v-highlight="affix"><code></code></pre>
        </template>
      </fx-card>
    </div>
    <div id="affix-offset">
      <fx-card title="固定位置偏移量">
        <div class="clearfix">
          <fx-anchor class="float_r" :affix-offset="50" :affix="true" scroll-target=".view-anchor">
            <fx-anchor-link href="#base" title="基础用法"/>
            <fx-anchor-link href="#static" title="静态位置"/>
            <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
            <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
          </fx-anchor>
        </div>
        <template #hide>
          <pre v-highlight="affixOffset"><code></code></pre>
        </template>
      </fx-card>
    </div>
    <div id="scroll-offset">
      <fx-card title="滚动位置偏移量">
        <div class="mb20"><fx-input-number v-model="scrollOffsetNumber"></fx-input-number></div>
        <fx-anchor :scroll-offset="scrollOffsetNumber" scroll-target=".view-anchor">
          <fx-anchor-link href="#base" title="基础用法"/>
          <fx-anchor-link href="#static" title="静态位置"/>
          <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
          <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
        </fx-anchor>
        <template #hide>
          <pre v-highlight="scrollOffset"><code></code></pre>
        </template>
      </fx-card>
    </div>
    <div class="box"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const scrollOffsetNumber = ref<number>(0)

const base = `<fx-anchor scroll-target=".view-anchor">
  <fx-anchor-link href="#base" title="基础用法"/>
  <fx-anchor-link href="#static" title="静态位置"/>
  <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
  <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
</fx-anchor>`
const affix = `<fx-anchor :affix-offset="100" :affix="true" scroll-target=".view-anchor">
  <fx-anchor-link href="#base" title="基础用法"/>
  <fx-anchor-link href="#static" title="静态位置"/>
  <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
  <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
</fx-anchor>`
const affixOffset = `<fx-anchor class="float_r" :affix-offset="50" :affix="true" scroll-target=".view-anchor">
  <fx-anchor-link href="#base" title="基础用法"/>
  <fx-anchor-link href="#static" title="静态位置"/>
  <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
  <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
</fx-anchor>`
const scrollOffset = `<div class="mb20"><fx-input-number v-model="scrollOffsetNumber"></fx-input-number></div>
<fx-anchor :scroll-offset="scrollOffset" scroll-target=".view-anchor">
  <fx-anchor-link href="#base" title="基础用法"/>
  <fx-anchor-link href="#static" title="静态位置"/>
  <fx-anchor-link href="#affix-offset" title="固定位置偏移量"/>
  <fx-anchor-link href="#scroll-offset" title="滚动位置偏移量"/>
</fx-anchor>`
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 800px;
}

.view-anchor {

}
</style>
